<script setup>
import { reactive, ref, computed } from 'vue'
import { showMessage, showNetError, strToNum, timestampToTime } from '@/public/public'
import { setSalaryApi } from '@/api/salary'
import { useUserStore } from '@/stores/counter'



const userStore = useUserStore();
const userMsg = computed(() => {
    return userStore.userMsg;
})
const token = userStore.userMsg.token;
const accountId = userStore.userMsg.accountId;


const salarySetDate = ref('')
const lastSetDate = ref('');
const salaryData = reactive({});

const iptData = reactive([{
    id: 1,
    title1: '迟到',
    title2: '次,',
    title3: '扣款',
    title4: '元',
    title5: '* 比如当月迟到1次，扣款10元，迟到2次，20元',
    iptOne: '',
    iptTwo: ''
}, {
    id: 2,
    title1: '早退',
    title2: '次,',
    title3: '扣款',
    title4: '元',
    title5: '* 比如当月早退1次，扣款10元，早退2次，20元',
    iptOne: '',
    iptTwo: ''
}, {
    id: 3,
    title1: '旷工',
    title2: '天，',
    title3: '扣款',
    title4: '元',
    title5: '* 比如当月旷工1天，扣款100元，旷工2天，200元',
    iptOne: '',
    iptTwo: ''
}, {
    id: 4,
    title1: '缺卡',
    title2: '次，',
    title3: '扣款',
    title4: '元',
    title5: '* 缺卡计算，截止每月薪资结算日，比如:当月缺卡1次，扣款10元，2次，20元',
    iptOne: '',
    iptTwo: ''
}, {
    id: 5,
    title1: '累计加班',
    title2: '小时以上，',
    title3: '每1小时加工资',
    title4: '元',
    title5: '* 比如累计加班40小时以上，从41小时算起，1小时10元',
    iptOne: '',
    iptTwo: ''
}])




// 点击"保存"
function salarySave() {
    //正则 - 匹配整数和小数 
    const regExp = /^\d*\.?\d+$/;

    //薪酬设置 如果输入有空格 强制替换掉空格
    salarySetDate.value = salarySetDate.value.replace(/\s+/g, '');
    //薪酬设置 判断输入框有没有输入数据
    if(salarySetDate.value.length === 0){
        showMessage('薪酬设置 为必填项， 请完善必填项数据', 'error', 2000);
        return;
    }
    //薪酬设置 输入框数据正则验证
    if(!regExp.test(salarySetDate.value) || strToNum(salarySetDate.value) > 31){
        showMessage('薪酬设置， 请设置正确的日期', 'error', 2000);
        return;
    }
    salaryData.sendDate = strToNum(salarySetDate.value);
    iptData.forEach(val => {
        //扣款设置 如果输入有空格 强制替换掉空格
        val.iptOne = val.iptOne.replace(/\s+/g, '');
        val.iptTwo = val.iptTwo.replace(/\s+/g, '');
    })
    let iptDataComplete = iptData.some(val=>{
        //扣款设置 判断还有哪些输入框没有输入数据
        return val.iptOne.length===0 || val.iptTwo.length===0
    });
    if(iptDataComplete){
        showMessage('扣款设置 为必填项， 请完善必填项数据', 'error', 2000);
        return;
    }
    let iptDataVerify = iptData.some(val=>{
        //扣款设置 输入框数据正则验证
        return !regExp.test(val.iptOne) || !regExp.test(val.iptTwo);
    });
    if(iptDataVerify){
        showMessage('扣款设置， 请输入正确整数或小数', 'error', 2000);
        return;
    }

    iptData.forEach(val => {
        switch (val.id) {
            case 1:
            salaryData.lateFine = strToNum(val.iptTwo) / strToNum(val.iptOne);
                break;
            case 2:
            salaryData.earlyFine = strToNum(val.iptTwo) / strToNum(val.iptOne);
                break;
            case 3:
            salaryData.absenceFine = strToNum(val.iptTwo) / strToNum(val.iptOne);
                break;
            case 4:
            salaryData.lackFine = strToNum(val.iptTwo) / strToNum(val.iptOne);
                break;
            case 5:
            salaryData.overWork = strToNum(val.iptTwo) / strToNum(val.iptOne);
                break;
            default:
        }
    });

    const obj = {
        sendDate:salaryData.sendDate,
        lateFine:salaryData.lateFine,
        earlyFine:salaryData.earlyFine,
        absenceFine:salaryData.absenceFine,
        lackFine:salaryData.lackFine,
        overWork:salaryData.overWork,
        token,
        accountId,
    }
    setSalaryApi(obj).then(res =>{
        const resData = res.data;
        console.log(res);
        lastSetDate.value = timestampToTime(resData.data.addTime);
        if(resData.code === 2 || resData.code === 3){
            showMessage(resData.msg, 'success', 2000);
        }else{
            showMessage(resData.msg, 'error', 2000);
        }

    }).catch(res=>{
        showNetError(res);
    });
}

</script>


<template>
    <div>
        <el-divider content-position="left" class="secTitle">薪酬设置</el-divider>
        <div class="firstBox">
            <span class="first-box-one-span">每月</span>
            <el-input v-model="salarySetDate" class="salaryipt" />
            <span class="first-box-two-span">日，结算薪资</span>
            <p class="tip">* 每月多少日，结算薪资，截止当日计算旷工、早退、迟到、缺卡、加班</p>
        </div>
        <el-divider content-position="left" class="secTitle secTitle-two">扣款设置</el-divider>
        <ul class="secondBox">
            <li v-for="item in iptData" :key="item.id">
                <span class="second-box-one-span">{{ item.title1 }}</span>
                <el-input v-model="item.iptOne" class="salaryipt" />
                <span class="second-box-two-span">{{ item.title2 }}</span>
                <span class="second-box-three-span">{{ item.title3 }}</span>
                <el-input v-model="item.iptTwo" class="salaryipt" />
                <span class="second-box-four-span">{{ item.title4 }}</span>
                <p class="tip">{{ item.title5 }}</p>
                <el-divider class="bottom-div-line" />
            </li>
        </ul>
        <div class="last-set-date" v-show="lastSetDate.length">上次设置时间：{{ lastSetDate }}</div>
        <el-button type="primary" @click="salarySave" class="salary-save">保存</el-button>
    </div>

</template>


<style>
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.secTitle {
    margin: 10px 0 20px 0;
}

.secTitle-two {
    margin: 30px 0 20px 0;
}

.secTitle .el-divider__text {
    color: var(--el-color-primary);
    font-size: 18px;
    padding: 0 10px;
}

.tip {
    height: 20px;
    border-radius: 5px;
    color: #909298;
    font-size: 12px;
    padding-left: 68px;
    color: #a55;
}

.bottom-div-line {
    margin: 15px 0 12px 0;
}
.salaryipt {
    display: inline;
}

.salaryipt .el-input__wrapper {
    width: 60px;
    height: 26px;
    padding: 0 6px;
}

.salaryipt .el-input__wrapper .el-input__inner {
    font-size: 16px;
    height: 26px;
    color: #e11;
    text-align: center;
}

.firstBox .first-box-one-span {
    display: inline-block;
    width: 60px;
    margin-right: 10px;
    text-align: right;
}
.firstBox .first-box-two-span {
    display: inline-block;
    width: 100px;
}

.secondBox li .second-box-one-span {
    display: inline-block;
    width: 60px;
    margin-right: 10px;
    text-align: right;
}
.secondBox li .second-box-two-span {
    display: inline-block;
    width: 30px;
    margin-left: 10px;
}
.secondBox li:last-child .second-box-two-span {
    display: inline-block;
    width: 80px;
    margin-left: 10px;
}
.secondBox li .second-box-three-span {
    display: inline-block;
    width: 40px;
    margin-right: 10px;
    text-align: right;
}

.secondBox li:last-child .second-box-three-span {
    display: inline-block;
    width: 100px;
    margin-right: 10px;
    text-align: right;
}
.secondBox li .second-box-four-span {
    display: inline-block;
    width: 30px;
    margin-left: 10px;
}
.salary-save {
    display: block;
    margin: 20px auto;
}
.last-set-date{
    font-size: 14px;
    color: var(--el-color-primary);
}


</style>